<script setup lang="ts">
import { getProductDetail } from "@/api/product/product";
import type { UploadFile } from "element-plus";
import { reactive, ref, toRefs } from "vue";
import { useRoute } from "vue-router";
import type { TabsPaneContext } from "element-plus";
import type { Product } from "@/types/index";
import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";
import {
  addCartItme,
  buyNnowCartItme,
  upIsChosen,
  upIsChosenAll,
} from "@/api/cart/cartItem";
import router from "@/router";
import { getProductReviewCount, getProductReviewList } from "@/api/review/review";
interface CartItem {
  productId: number | null;
  quantity: number;
  addedAt: string;
  isChosen: number;
}
interface Review {
  id: number;
  productId: number;
  userId: number;
  userName: string;
  content: string;
  rating: number;
  userAvatar: string;
  createTime: string;
  parentId: number;
  isAnonymous: number;
  auditStatus: number;
  likeCount: number;
  pageNum: number;
  acclaim: number | null;
  badReviews: number | null;
  CommentAll: number;
  acclaimCount: number;
  badReviewsCount: number;
}
const cartItem = ref<CartItem>({
  productId: null,
  quantity: 1,
  addedAt: "",
  isChosen: 0,
});

const reviewCount = ref({
  CommentAll: 0,
  acclaimCount: 0,
  badReviewsCount: 0,
});
const loading = ref(false);
const isContentTitle = ref("全部评论");
const reviewList = ref<Review[]>([]);
const total = ref(0);
const route = useRoute();
const data = reactive({
  queryParams: <Review>{
    pageNum: 1,
  },
});
const { queryParams } = toRefs(data);
const imgs = ref();
const productDetail = ref<Product>();
// 获取商品详情
async function loadProductDetail() {
  loading.value = true;
  await getProductDetail([Number(route.params.id)][0]).then((response) => {
    productDetail.value = response.data.data;

    if (productDetail.value != null) {
      imgs.value = response.data.data.imgs;
    }
  });
  loading.value = false;
}
//加入采花车按钮
const addCartItemButton = async (productDetail: any) => {
  cartItem.value.productId = productDetail.productId;
  await addCartItme(cartItem.value);
  router.push("/cart");
};
//立即购买按钮
const buyNnow = async (productDetail: any) => {
  await upIsChosenAll();
  cartItem.value.productId = productDetail.productId;
  cartItem.value.isChosen = 1;
  await buyNnowCartItme(cartItem.value);
  router.push("/order");
};
const activeName = ref("third");

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
// 当前页
const handleCurrentChange = (val: number) => {
  queryParams.value.pageNum = val;
  loadReview();
};
// 初始化评论
async function loadReview() {
  loading.value = true;
  if (isContentTitle.value == "好评") {
    queryParams.value.acclaim = 3;
    queryParams.value.badReviews = null;
  } else if (isContentTitle.value == "差评") {
    queryParams.value.badReviews = 3;
    queryParams.value.acclaim = null;
  }

  queryParams.value.productId = Number(route.params.id);
  await getProductReviewList(queryParams.value).then((response) => {
    reviewList.value = response.data.rows;
    total.value = response.data.total;
  });
  //获取评价数量
  await getProductReviewCount(queryParams.value.productId).then((reponse) => {
    reviewCount.value.CommentAll = reponse.data.data.commentAll;
    reviewCount.value.acclaimCount = reponse.data.data.acclaimCount;
    reviewCount.value.badReviewsCount = reponse.data.data.badReviewsCount;
  });
  loading.value = false;
}
loadProductDetail();
loadReview();
</script>
<template>
  <div v-if="productDetail != null">
    <el-container>
      <el-aside class="productImgs-box" width="450px" v-loading="loading">
        <el-carousel
          height="450px"
          :interval="5000"
          arrow="always"
          style="border-radius: 10px"
        >
          <el-carousel-item v-for="img in imgs" :key="img">
            <el-image style="width: 100%; height: 100%" :src="img.url" fit="cover">
              <template #error></template
            ></el-image>
          </el-carousel-item> </el-carousel
      ></el-aside>
      <el-main v-loading="loading">
        <el-row>
          <el-col :span="24">
            <el-text class="name" tag="b">{{ productDetail?.name }}</el-text>
          </el-col>
          <el-divider />
          <el-col :span="24">
            <el-text class="mx-1">详情:</el-text>
            <el-text style="color: darkgrey" tag="b">{{
              productDetail?.description
            }}</el-text>
          </el-col>
          <el-divider />
          <el-col :span="24">
            <el-text class="mx-1">价格:</el-text>
            <el-text style="font-size: 20px; color: red" tag="b"
              >{{ productDetail?.price }}元</el-text
            >
          </el-col>

          <el-divider />
          <el-col :span="24" style="text-align: right">
            <el-input-number
              v-model="cartItem.quantity"
              :min="1"
              :max="100"
              controls-position="right"
              style="margin-right: 12px; width: 90px"
            >
              <template #decrease-icon>
                <el-icon>
                  <Minus />
                </el-icon>
              </template>
              <template #increase-icon>
                <el-icon>
                  <Plus />
                </el-icon>
              </template>
            </el-input-number>
            <el-button type="primary" @click="addCartItemButton(productDetail)"
              >加入采花车</el-button
            >
            <el-button type="primary" @click="buyNnow(productDetail)">立即购买</el-button>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <el-main style="height: auto">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="商品评价" name="third" v-loading="loading">
          <el-card class="content-card" shadow="never">
            <el-link
              type="info"
              :underline="false"
              @click="(isContentTitle = '全部评论'), loadReview()"
              :style="{ color: isContentTitle == '全部评论' ? 'rgb(255 0 0)' : '' }"
              >全部评论({{ reviewCount.CommentAll }})</el-link
            >
            <el-link
              type="info"
              :underline="false"
              @click="(isContentTitle = '好评'), loadReview()"
              :style="{ color: isContentTitle == '好评' ? 'rgb(255 0 0)' : '' }"
              >好评({{ reviewCount.acclaimCount }})</el-link
            >
            <el-link
              type="info"
              :underline="false"
              @click="(isContentTitle = '差评'), loadReview()"
              :style="{ color: isContentTitle == '差评' ? 'rgb(255 0 0)' : '' }"
              >差评({{ reviewCount.badReviewsCount }})</el-link
            >
          </el-card>
          <div
            v-if="reviewList.length > 0"
            class="content-box"
            v-for="item in reviewList"
          >
            <div class="user-avatar">
              <el-avatar size="" :src="item.userAvatar" />
              <span class="user-name">{{ item.userName }}</span>
            </div>
            <div class="content-info">
              <div><el-rate v-model="item.rating" disabled size="large" /></div>
              <div style="width: auto">
                <el-text>
                  {{ item.content }}
                </el-text>
                <br />
                <div style="display: flex; justify-content: space-between">
                  <el-text>{{ item.createTime }}</el-text>
                </div>
              </div>
            </div>
          </div>
          <div v-else style="text-align: center; margin-top: 10px">
            <el-text style="font-size: 16px"> 暂无评论</el-text>
          </div>
          <div style="margin-top: 20px">
            <el-pagination
              background
              layout="->,prev, pager, next"
              @current-change="handleCurrentChange"
              :total="total"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-main>
  </div>
  <el-empty v-else description="暂无商品">
    <el-button @click="router.push('/home')" type="primary">去逛逛</el-button>
  </el-empty>
</template>
<style lang="less" scoped>
.demo-tabs {
  margin-top: 20px;
}
.name {
  font-size: 20px;
  color: #000;
}
.productImgs-box {
  height: 450px;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
<style lang="less">
.content-card {
  width: auto;

  .el-card__body {
    padding: 10px;
    .el-link {
      margin-left: 7px;
      margin-right: 7px;
    }
  }
}
.user-avatar {
  width: 150px;
  display: flex;
  align-items: center;
  margin-top: 6px;
  margin-left: 3px;
  .user-name {
    margin-left: 10px;
  }
}
.content-info {
  width: 100%;
}
.content-box {
  width: auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 10px;
  border-bottom-style: solid;
  border-width: 1px;
  line-height: 180%;
  border-color: rgb(187, 186, 186);
}
</style>
<style lang="less" scoped>
svg {
  width: 15px;
}
</style>
